<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="nav">
      <view class="nav-item" @click="navigateTo('create')">
        <text class="icon">📝</text>
        <text class="label">发布创作</text>
      </view>
      <view class="nav-item" @click="navigateTo('drafts')">
        <text class="icon">📄</text>
        <text class="label">我的草稿</text>
      </view>
      <view class="nav-item" @click="navigateTo('works')">
        <text class="icon">📊</text>
        <text class="label">我的创作</text>
      </view>
    </view>

    <!-- 写作指南 -->
    <view class="guide">
      <text class="title">写作指南</text>
      <view class="guide-item">1. 常见问题解答</view>
      <view class="guide-item">2. 文章撰写规范</view>
      <view class="guide-item">3. 常见问题解答</view>
      <view class="guide-item">4. 常见问题解答</view>
    </view>

    <!-- 案例展示 -->
    <view class="cases">
      <text class="section-title">案例展示</text>
      <view class="case-item">
        <text class="case-title">夏天不能光脚丫，不能吃冰激凌？别用养生折腾孩子了</text>
        <text class="author">张清北 北京协和医院</text>
        <text class="stats">95收藏 10点赞 34评论</text>
      </view>
      <view class="case-item">
        <text class="case-title">夏天不能光脚丫，不能吃冰激凌？别用养生折腾孩子了</text>
        <text class="author">张清北 北京协和医院</text>
        <text class="stats">95收藏 10点赞 34评论</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    navigateTo(route) {
      // 导航逻辑
      console.log(`Navigating to ${route}`);
      if (route === 'create') {
        // 跳转到发布创作页面
        uni.navigateTo({
          url: '/pages/create/create/index'
        });
      } else if (route === 'drafts') {
        // 跳转到我的草稿页面
        uni.navigateTo({
          url: '/pages/drafts/drafts/index'
        });
      } else if (route === 'works') {
        // 跳转到我的创作页面
        uni.navigateTo({
          url: '/pages/works/works/index'
        });
      }
    }
  }
};
</script>

<style>
.container {
  padding: 16px;
  background-color: #f5f5f5;
}

.nav {
  display: flex;
  justify-content: space-around;
  margin-bottom: 16px;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
  padding: 16px;
  border-radius: 8px;
}

.icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.label {
  font-size: 14px;
}

.guide {
  background-color: #ffffff;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.guide-item {
  font-size: 14px;
  margin-bottom: 8px;
}

.cases {
  background-color: #ffffff;
  padding: 16px;
  border-radius: 8px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.case-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.case-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.author {
  font-size: 14px;
  color: #888888;
  margin-bottom: 4px;
}

.stats {
  font-size: 12px;
  color: #888888;
}
</style>
